<template>
	<view >
		<view  @click="backButton">
			<cu-custom bgColor="bg-gradual-pink header-bg" :isBack="true" >
				<block slot="backText" >返回</block>
				<!-- <block slot="content">文章详情</block> -->
			</cu-custom>
		</view>
		
		<view class="banner title-top">
			<image class="banner-img" :src="banner.image_url"></image>
			<view class="banner-title">{{banner.title}}</view>
		</view>
		<view class="article-meta">
			<text class="article-author">{{banner.source}}</text>
			<text class="article-text">发表于</text>
			<text class="article-time">{{banner.datetime}}</text>
		</view>
		<view class="article-content">
			<wxParse :content="content" @preview="preview" style="widht:710px;"  @navigate="navigate" />
		</view>
	</view>
</template>

<script>
	const FAIL_CONTENT = '<p>文章可能已被小编删除，请返回查看其他文章...</p>';
	import marked from 'marked'
	import wxParse from 'mpvue-wxparse'

	export default {
		components: {
			wxParse
		},
		data() {
			return {
				banner: {},
				content: '',
			}
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: '/pages/detail/detail?query=' + JSON.stringify(this.banner)
			}
		},
		onLoad(event) {
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			this.banner.post_id =  event.post_id;
			this.getDetail();

		},
		methods: {
			getDetail() {
				uni.request({
					url: 'https://www.btxiaobai.com/xem/cdetail',
					data: {
						postId :this.banner.post_id,
					},
					success: (result) => {
						if (result.statusCode == 200) {
							this.banner.title = result.data.title;
							this.banner.image_url = result.data.page_image;
							this.banner.datetime = result.data.created_at;
							this.banner.source = result.data.user_id;
							this.content = marked(result.data.html);
						} else {
							this.content = FAIL_CONTENT;
						}
					}
				});
			},
			backButton(){  
				uni.navigateBack({
					delta: 1
				});
			}, 
		}
	}
</script>

<style>
	@import url("mpvue-wxparse/src/wxParse.css");
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20upx 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin: 0 20upx;
	}

	.article-author,
	.article-time {
		font-size: 30upx;
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		margin-bottom: 30upx;
	}
	.header-bg{
		height: 120upx;
		padding-top:70upx;
		width:100%;
	}
	.title-top{
		margin-top:30upx;
	}
</style>
